<template>
  <div class="person-info-container">
    <a-card v-for="item in contactList" :title="item.name" :key="item.name" style="width: 300px" class="contact-card">
      <!-- 开关区域 -->
      <div style="margin-bottom: 16px">
        <span>是否公开：</span>
        <a-switch v-model:checked="isPublic" />
      </div>
      <!-- 信息列表 -->
      <ul class="info-list">
        <li>手机：{{ item.phone }}</li>
        <li>电话：{{ item.telephone }}</li>
        <li>邮件：{{ item.email }}</li>
        <li>客户生日：{{ item.birthday }}</li>
        <li>备注：{{ contactInfo.remark }}</li>
      </ul>
    </a-card>
    <a-card style="width: 300px" hoverable @click="showAddContactModal">
      <div class="add-contact-card">
        <div class="add-icon">
          <PlusOutlined />

        </div>
        <div class="add-text">新增联系人</div>
      </div>

    </a-card>

    <a-modal v-model:visible="addContactModalVisible" title="新增联系人" @ok="handleAddContactOk"
      @cancel="handleAddContactCancel">
      <a-form :model="formState" :rules="rules" ref="formRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="姓名" name="name" required>
          <a-input v-model:value="formState.name" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="职位" name="position">
          <a-select v-model:value="formState.position" placeholder="请选择">
            <a-select-option value="老板">老板</a-select-option>
            <a-select-option value="经理">经理</a-select-option>
            <a-select-option value="员工">员工</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="手机" name="phone">
          <a-input v-model:value="formState.phone" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="电话" name="telephone">
          <a-input v-model:value="formState.telephone" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="邮件" name="email">
          <a-input v-model:value="formState.email" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="客户生日" name="birthday">
          <a-date-picker v-model:value="formState.birthday" placeholder="请选择" style="width: 100%" />
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea v-model:value="formState.remark" placeholder="请输入" :rows="3" show-count :maxlength="32" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>


</template>

<script setup>
import { ref, reactive } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';

// 响应式数据：控制开关状态
const isPublic = ref(false);

// 联系人信息（示例数据，实际可从接口获取）
const contactInfo = ref({
  phone: '--',
  telephone: '--',
  email: '--',
  birthday: '--',
  remark: '--'
});

// 卡片标题（使用纯字符串或模板语法，避免JSX）
const cardTitle = '王先生';

const contactList = ref([]);
contactList.value = [
  {
    name: '王先生',
    position: '老板',
    phone: '13800138000',
    telephone: '0757-12345678',
    email: 'wang@example.com',
    birthday: '1980-01-01',
    remark: '主要联系人'
  },
  {
    name: '李小姐',
    position: '经理',
    phone: '13900139000',
    telephone: '0757-87654321',
    email: 'li@example.com',
    birthday: '1985-05-12',
    remark: '负责财务'
  },
  {
    name: '张先生',
    position: '员工',
    phone: '13700137000',
    telephone: '0757-11223344',
    email: 'zhang@example.com',
    birthday: '1990-09-09',
    remark: '技术支持'
  },
  {
    name: '赵女士',
    position: '经理',
    phone: '13600136000',
    telephone: '0757-44332211',
    email: 'zhao@example.com',
    birthday: '1988-03-22',
    remark: '市场负责人'
  },
  {
    name: '孙先生',
    position: '员工',
    phone: '13500135000',
    telephone: '0757-55667788',
    email: 'sun@example.com',
    birthday: '1992-12-30',
    remark: '售后服务'
  }
];



// Add contact modal
const addContactModalVisible = ref(false);
const formRef = ref();
const formState = reactive({
  name: '',
  position: '老板',
  phone: '',
  telephone: '',
  email: '',
  birthday: null,
  remark: '',
});

const rules = {
  name: [{ required: true, message: '请输入姓名' }],
};

const showAddContactModal = () => {
  addContactModalVisible.value = true;
};

const handleAddContactOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState);
      // Here you can handle form submission, e.g., send data to backend
      // After submission, close the modal and maybe refresh the contact list
      addContactModalVisible.value = false;
    })
    .catch(info => {
      console.log('Validate Failed:', info);
    });
};

const handleAddContactCancel = () => {
  addContactModalVisible.value = false;
};
</script>

<style scoped>
.person-info-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  margin-bottom: 8px;
  color: #666;
}

.add-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 300px;

}

.add-icon {
  width: 50px;
  height: 50px;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #d9d9d9;
  font-size: 20px;
}

.add-text {
  color: #999;
}
</style>
